<%--
  Created by IntelliJ IDEA.
  Dept: Gao
  Date: 2021/6/10
  Time: 14:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="header.jsp"%>
<html>
<head>
    <title>Title</title>
    <style>
        /*解决layui table checkbox不居中的问题*/
        .layui-table-cell .layui-form-checkbox[lay-skin="primary"]{
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
    <table class="layui-hide" id="test" lay-filter="layFilter"></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="insert">添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="deleteAll">批量删除</button>
        </div>
    </script>

    <script>
        layui.use('table', function(){
            var table = layui.table;

            table.render({
                elem: '#test'
                ,url:'${path}/dept/selectByPage'
                ,toolbar: '#toolbarDemo'
                ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                ,cols: [[
                    {type:'checkbox'}
                    ,{field:'id', title: 'ID', sort: true}
                    ,{field:'name', title: '部门名'}
                    ,{toolbar: '#barDemo'}
                ]]
                ,page: true
                ,id : 'tableId'
            });

            //监听工具条
            table.on('tool(layFilter)', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){ // 点击了右边的删除按钮
                    layer.confirm(
                        '真的删除行么',
                        {icon:3, title:'提示'},
                        function(index) {
                            // 通过发送ajax请求后台，ajax能实现页面的无刷新
                            // 可以简单理解为发送请求到后台
                            $.post(
                                '${path}/dept/deleteById',
                                {'id':data.id},
                                function(jsonResult) {
                                    // 发送ajax请求返回JSONResult这个结构
                                    if (jsonResult.ok) {
                                        layer.msg(jsonResult.msg);
                                    }
                                    // 删除完了之后，刷新table页面
                                    table.reload('tableId');
                                }
                            );
                        }
                    );
                } else if(obj.event === 'edit'){
                    layer.open({
                        type:2,
                        area:['550px', '270px'],
                        content: '${path}/dept/getDeptUpdatePage?id=' + data.id
                    });
                }
            });


            //头工具栏事件
            table.on('toolbar(layFilter)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id); //获取选中行状态
                switch(obj.event){
                    case 'insert':
                        layer.open({
                            type:2,
                            area:['550px', '270px'],
                            content: '${path}/dept/getDeptInsertPage'
                        });
                        break;
                    case 'deleteAll':
                        var checkStatus = table.checkStatus('tableId');
                        var data = checkStatus.data;
                        var ids = []; // [30,31]
                        for(var i = 0; i < data.length; i++){
                            ids.push(data[i].id);
                        }

                        layer.confirm(
                            '真的删除行么',
                            {icon:3, title:'提示'},
                            function(index) {
                                // 通过发送ajax请求后台，ajax能实现页面的无刷新
                                // 可以简单理解为发送请求到后台
                                $.post(
                                    '${path}/dept/deleteAll',
                                    {'ids': ids},
                                    function(jsonResult) {
                                        // 发送ajax请求返回JSONResult这个结构
                                        if (jsonResult.ok) {
                                            layer.msg(jsonResult.msg);
                                        }
                                        // 删除完了之后，刷新table页面
                                        table.reload('tableId');
                                    }
                                );
                            }
                        );
                        break;
                };
            });

        });
    </script>
</body>
</html>
